<!DOCTYPE HTML>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
	<title>个人中心</title>
	<link rel="stylesheet" type="text/css" href="../../css/base.css" />
	<style type="text/css">
		body {
			background: #F0F1F2;
		}

		.wraper-pie {
			padding: 0.15rem;
			background: #ffffff;
			margin-bottom: 0.1rem;
		}

		.wraper-pie .title {
			font-size: 0.16rem;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #4D4D4D;
			line-height: 0.22rem;
		}

		.page-footer {
			overflow: hidden;
			padding: 10px;
		}

		.page-footer .item {
			float: left;
			padding: 5px;
			width: calc(100% / 2 - 1px);
			overflow: hidden;
		}

		.page-footer .item .icon {
			margin-right: 4px;
		}

		.page-footer .item .icon i {
			display: inline-block;
			width: 6px;
			height: 6px;
		}
	</style>
</head>

<body>
	<div id="app" v-cloak="">
		<!-- 图一 -->

		<div class="wraper-pie">
			<div class="title">
				订单金额{{monthValue8}}月数据统计<span>￥{{price_format('yuan',monthPrice8)}}.{{price_format('fen',monthPrice8)}}</span>
			</div>

			<ve-histogram v-if="show2" :events="chartEvents8" colors="#37A2DA" :grid="gridYearsPrice"
				:data="chartDataYearsPrice" :legend-visible="false" :tooltip-visible="false"
				:settings="chartSettingsYearsPrice"></ve-histogram>

		</div>


		<div class="wraper-pie">
			<div class="title">
				订单{{monthValue7}}月数据统计<span>￥{{price_format('yuan',monthPrice7)}}.{{price_format('fen',monthPrice7)}}</span>
			</div>
			<div class="page-footer">
				<div class="item flex-box-x" v-for="(vo,index) in order_board_tubiao2Data" :key="index">
					<div class="icon flex-y-center">
						<i :style="`background:${vo.color}`"></i>
					</div>
					<div class="col-xs-x flex-y-center">
						<div class="content ellipsis" v-text="vo.name"></div>
					</div>
				</div>
			</div>
			<ve-histogram :events="chartEvents7" :after-set-option="orderboardoptions" :legend-visible="false"
				v-if="show"></ve-histogram>
		</div>

		<div class="wraper-pie">
			<div class="title">
				石膏板本月数统计<span>￥{{price_format('yuan',info.month_money1)}}.{{price_format('fen',info.month_money1)}}</span>

			</div>
			<ve-pie :data="chartData" :settings="chartSettings" :legend-visible="false"></ve-pie>

			<div class="page-footer">
				<div class="item flex-box-x" v-for="(vo,index) in rows" :key="index">
					<div class="icon flex-y-center">
						<i :style="`background:${vo.color}`"></i>
					</div>
					<div class="col-xs-x flex-y-center">
						<div class="content ellipsis" v-text="vo.name"></div>
					</div>
				</div>
			</div>
		</div>
		<!-- 图二 -->
		<div class="wraper-pie">
			<div class="title">
				石膏板{{monthValue1}}月数据数统计<span>￥{{price_format('yuan',monthPrice1)}}.{{price_format('fen',monthPrice1)}}</span>
			</div>
			<div class="page-footer">
				<div class="item flex-box-x" v-for="(vo,index) in rows" :key="index">
					<div class="icon flex-y-center">
						<i :style="`background:${vo.color}`"></i>
					</div>
					<div class="col-xs-x flex-y-center">
						<div class="content ellipsis" v-text="vo.name"></div>
					</div>
				</div>
			</div>
			<ve-histogram :events="chartEvents1" :after-set-option="options" :legend-visible="false" v-if="show">
			</ve-histogram>
		</div>
		<!--  -->
		<!-- 图三 -->
		<div class="wraper-pie">
			<div class="title">
				粉类辅料月度数据统计<span>￥{{price_format('yuan',info.month_money2)}}.{{price_format('fen',info.month_money2)}}</span>

			</div>
			<ve-pie :data="powders_chartData" :settings="chartSettings" :legend-visible="false"></ve-pie>

			<div class="page-footer">
				<div class="item flex-box-x" v-for="(vo,index) in powders_rows" :key="index">
					<div class="icon flex-y-center">
						<i :style="`background:${vo.color}`"></i>
					</div>
					<div class="col-xs-x flex-y-center">
						<div class="content ellipsis" v-text="vo.name"></div>
					</div>
				</div>
			</div>
		</div>
		<!--  -->
		<!-- 图四  -->
		<div class="wraper-pie">
			<div class="title">
				粉类辅料{{monthValue2}}月数据统计<span>￥{{price_format('yuan',monthPrice2)}}.{{price_format('fen',monthPrice2)}}</span>
			</div>
			<div class="page-footer">
				<div class="item flex-box-x" v-for="(vo,index) in powders_tubiao2Data" :key="index">
					<div class="icon flex-y-center">
						<i :style="`background:${vo.color}`"></i>
					</div>
					<div class="col-xs-x flex-y-center">
						<div class="content ellipsis" v-text="vo.name"></div>
					</div>
				</div>
			</div>
			<ve-histogram :events="chartEvents2" :after-set-option="powdersoptions" :legend-visible="false" v-if="show">
			</ve-histogram>
		</div>

		<!-- 图四 -->
		<div class="wraper-pie">
			<div class="title">
				龙骨本月数据统计<span>￥{{price_format('yuan',info.month_money3)}}.{{price_format('fen',info.month_money3)}}</span>

			</div>
			<ve-pie :data="keel_chartData" :settings="chartSettings" :legend-visible="false"></ve-pie>

			<div class="page-footer">
				<div class="item flex-box-x" v-for="(vo,index) in keel_rows" :key="index">
					<div class="icon flex-y-center">
						<i :style="`background:${vo.color}`"></i>
					</div>
					<div class="col-xs-x flex-y-center">
						<div class="content ellipsis" v-text="vo.name"></div>
					</div>
				</div>
			</div>
		</div>
		<!--  -->
		<!-- 图五  -->
		<div class="wraper-pie">
			<div class="title">
				龙骨{{monthValue3}}月数据统计<span>￥{{price_format('yuan',monthPrice3)}}.{{price_format('fen',monthPrice3)}}</span>
			</div>
			<div class="page-footer">
				<div class="item flex-box-x" v-for="(vo,index) in keel_tubiao2Data" :key="index">
					<div class="icon flex-y-center">
						<i :style="`background:${vo.color}`"></i>
					</div>
					<div class="col-xs-x flex-y-center">
						<div class="content ellipsis" v-text="vo.name"></div>
					</div>
				</div>
			</div>
			<ve-histogram :events="chartEvents3" :after-set-option="keeloptions" :legend-visible="false" v-if="show">
			</ve-histogram>
		</div>

		<!-- 图六 -->
		<div class="wraper-pie">
			<div class="title">
				配套附件本月数据统计<span>￥{{price_format('yuan',info.month_money4)}}.{{price_format('fen',info.month_money4)}}</span>

			</div>
			<ve-pie :data="annexe_chartData" :settings="chartSettings" :legend-visible="false"></ve-pie>

			<div class="page-footer">
				<div class="item flex-box-x" v-for="(vo,index) in annexe_rows" :key="index">
					<div class="icon flex-y-center">
						<i :style="`background:${vo.color}`"></i>
					</div>
					<div class="col-xs-x flex-y-center">
						<div class="content ellipsis" v-text="vo.name"></div>
					</div>
				</div>
			</div>
		</div>
		<!--  -->
		<!-- 图七  -->
		<div class="wraper-pie">
			<div class="title">
				配套附件{{monthValue4}}月数据统计<span>￥{{price_format('yuan',monthPrice4)}}.{{price_format('fen',monthPrice4)}}</span>
			</div>
			<div class="page-footer">
				<div class="item flex-box-x" v-for="(vo,index) in annexe_tubiao2Data" :key="index">
					<div class="icon flex-y-center">
						<i :style="`background:${vo.color}`"></i>
					</div>
					<div class="col-xs-x flex-y-center">
						<div class="content ellipsis" v-text="vo.name"></div>
					</div>
				</div>
			</div>
			<ve-histogram :events="chartEvents4" :after-set-option="annexeoptions" :legend-visible="false" v-if="show">
			</ve-histogram>
		</div>

		<!-- 图六 -->
		<div class="wraper-pie">
			<div class="title">
				木板本月数统计<span>￥{{price_format('yuan',info.month_money5)}}.{{price_format('fen',info.month_money5)}}</span>

			</div>
			<ve-pie :data="board_chartData" :settings="chartSettings" :legend-visible="false"></ve-pie>

			<div class="page-footer">
				<div class="item flex-box-x" v-for="(vo,index) in board_rows" :key="index">
					<div class="icon flex-y-center">
						<i :style="`background:${vo.color}`"></i>
					</div>
					<div class="col-xs-x flex-y-center">
						<div class="content ellipsis" v-text="vo.name"></div>
					</div>
				</div>
			</div>
		</div>
		<!--  -->
		<!-- 图七  -->
		<div class="wraper-pie">
			<div class="title">
				木板{{monthValue5}}月数据统计<span>￥{{price_format('yuan',monthPrice5)}}.{{price_format('fen',monthPrice5)}}</span>
			</div>
			<div class="page-footer">
				<div class="item flex-box-x" v-for="(vo,index) in board_tubiao2Data" :key="index">
					<div class="icon flex-y-center">
						<i :style="`background:${vo.color}`"></i>
					</div>
					<div class="col-xs-x flex-y-center">
						<div class="content ellipsis" v-text="vo.name"></div>
					</div>
				</div>
			</div>
			<ve-histogram :events="chartEvents5" :after-set-option="boardoptions" :legend-visible="false" v-if="show">
			</ve-histogram>
		</div>


		<!-- 图六 -->
		<div class="wraper-pie">
			<div class="title">
				其他板材本月数统计<span>￥{{price_format('yuan',info.month_money6)}}.{{price_format('fen',info.month_money6)}}</span>

			</div>
			<ve-pie :data="other_board_chartData" :settings="chartSettings" :legend-visible="false"></ve-pie>

			<div class="page-footer">
				<div class="item flex-box-x" v-for="(vo,index) in other_board_rows" :key="index">
					<div class="icon flex-y-center">
						<i :style="`background:${vo.color}`"></i>
					</div>
					<div class="col-xs-x flex-y-center">
						<div class="content ellipsis" v-text="vo.name"></div>
					</div>
				</div>
			</div>
		</div>
		<!--  -->
		<!-- 图七  -->
		<div class="wraper-pie">
			<div class="title">
				其他板材{{monthValue6}}月数据统计<span>￥{{price_format('yuan',monthPrice6)}}.{{price_format('fen',monthPrice6)}}</span>
			</div>
			<div class="page-footer">
				<div class="item flex-box-x" v-for="(vo,index) in other_board_tubiao2Data" :key="index">
					<div class="icon flex-y-center">
						<i :style="`background:${vo.color}`"></i>
					</div>
					<div class="col-xs-x flex-y-center">
						<div class="content ellipsis" v-text="vo.name"></div>
					</div>
				</div>
			</div>
			<ve-histogram :events="chartEvents6" :after-set-option="otherboardoptions" :legend-visible="false"
				v-if="show"></ve-histogram>
		</div>


	</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">
<!-- <script type="text/javascript" src="../../script/aui-dialog.js"></script> -->
<script>
	var vm = new Vue({
		el: "#app",
		data: function () {
			var that = this;
			this.chartSettingsYearsPrice = {
				metrics: ['money'],
				dimension: ['month']
			}
			this.gridYearsPrice = {
				top: "30px",
				bottom: "10px",
			}
			this.chartSettings = {
				roseType: 'radius',
				itemStyle: {
					emphasis: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: 'rgba(0, 0, 0, 0.5)'
					},
					normal: {
						color: function (params, index) {
							return vm.rows[params.dataIndex].color
						}
					}
				},
			}
			this.chartEvents1 = {
				click: function (e) {
					that.monthValue1 = parseFloat(e.name)
					that.monthPrice1 = that.tubiao2Data[parseFloat(e.name)-1].month_money
				},
				mousemove: function (e) {
					that.monthValue1 = parseFloat(e.name)
					that.monthPrice1 = that.tubiao2Data[parseFloat(e.name)-1].month_money
				},
			}
			this.chartEvents2 = {
				click: function (e) {
					that.monthValue2 = parseFloat(e.name)
					that.monthPrice2 = that.powders_tubiao2Data[parseFloat(e.name)-1].month_money
				},
				mousemove: function (e) {
					that.monthValue2 = parseFloat(e.name)
					that.monthPrice2 = that.powders_tubiao2Data[parseFloat(e.name)-1].month_money
				},
			}
			this.chartEvents3 = {
				click: function (e) {
					that.monthValue3 = parseFloat(e.name)
					that.monthPrice3 = that.keel_tubiao2Data[parseFloat(e.name)-1].month_money
				},
				mousemove: function (e) {
					that.monthValue3 = parseFloat(e.name)
					that.monthPrice3 = that.keel_tubiao2Data[parseFloat(e.name)-1].month_money
				},
			}
			this.chartEvents4 = {
				click: function (e) {
					that.monthValue4 = parseFloat(e.name)
					that.monthPrice4 = that.annexe_tubiao2Data[parseFloat(e.name)-1].month_money
				},
				mousemove: function (e) {
					that.monthValue4 = parseFloat(e.name)
					that.monthPrice4 = that.annexe_tubiao2Data[parseFloat(e.name)-1].month_money
				},
			}
			this.chartEvents5 = {
				click: function (e) {
					that.monthValue5 = parseFloat(e.name)
					that.monthPrice5 = that.board_tubiao2Data[parseFloat(e.name)-1].month_money
				},
				mousemove: function (e) {
					that.monthValue5 = parseFloat(e.name)
					that.monthPrice5 = that.board_tubiao2Data[parseFloat(e.name)-1].month_money
				},
			}
			this.chartEvents6 = {
				click: function (e) {
					that.monthValue6 = parseFloat(e.name)
					that.monthPrice6 = that.other_board_tubiao2Data[parseFloat(e.name)-1].month_money
				},
				mousemove: function (e) {
					that.monthValue6 = parseFloat(e.name)
					that.monthPrice6 = that.other_board_tubiao2Data[parseFloat(e.name)-1].month_money
				},
			}
			this.chartEvents7 = {
				click: function (e) {
					that.monthValue7 = parseFloat(e.name)
					that.monthPrice7 = that.order_board_tubiao2Data[parseFloat(e.name)-1].money
				},
				mousemove: function (e) {
					that.monthValue7 = parseFloat(e.name)
					that.monthPrice7 = that.order_board_tubiao2Data[parseFloat(e.name)-1].money
				},
			}
			this.chartEvents8 = {
				click: function (e) {
					that.monthValue8 = parseFloat(e.name)
					that.monthPrice8 = that.chartDataYearsPrice.rows[parseFloat(e.name)-1].money
				},
				mousemove: function (e) {
					that.monthValue8 = parseFloat(e.name)
					that.monthPrice8 = that.chartDataYearsPrice.rows[parseFloat(e.name)-1].money
				},
			}
			return {
				chartDataYearsPrice: {
					columns: ['month'],
					rows: []
				},
				rows: [],
				chartData: {},
				tubiao2Data: [],
				show: false,
				show2: false,
				powders_rows: [],
				powders_chartData: {},
				powders_tubiao2Data: {},
				keel_rows: [],
				keel_chartData: {},
				keel_tubiao2Data: {},
				annexe_rows: [],
				annexe_chartData: {},
				annexe_tubiao2Data: {},
				board_rows: [],
				board_chartData: {},
				board_tubiao2Data: {},
				other_board_rows: [],
				other_board_chartData: {},
				other_board_tubiao2Data: {},
				order_board_rows: [],
				order_board_chartData: {},
				order_board_tubiao2Data: {},
				info: [],
				yearPrice: '',
				monthValue1: null,
				monthValue2: null,
				monthValue3: null,
				monthValue4: null,
				monthValue5: null,
				monthValue6: null,
				monthValue6: null,
				monthValue7: null,
				monthValue8: null,
				monthPrice1: null,
				monthPrice2: null,
				monthPrice3: null,
				monthPrice4: null,
				monthPrice5: null,
				monthPrice6: null,
				monthPrice7: null,
				monthPrice8: null,
			}
		},

		methods: {
			price_format: function (type, price) {
				var status = (price + '').indexOf('.')
				if (status == '-1') {
					if (type == 'yuan') {
						return price;
					}
					if (type == 'fen') {
						return '00';
					}
				}
				var price_array = (price + '').split('.')
				if (type == 'yuan') {
					return price_array[0];
				}
				if (type == 'fen') {
					var price_fen = price_array[1].length < 2 ? price_array[1] + '0' : price_array[1];
					return price_fen;
				}
			},

			getMonthStatics: function () {
				get_data('api/user/MonthStatics', {
					token: $api.getStorage('token')
				}, function (ret) {
					if (ret.status || ret.code) {
						var data = ret.data.data;
						var arr = [];
						for (var i = 0; i < data.length; i++) {
							var obj = {
								'month': '',
								'money': ''
							}
							obj['month'] = data[i].month;
							obj['money'] = Number(data[i].money);
							arr.push(obj);
						}
						vm.chartDataYearsPrice.rows = arr;
						var month = new Date().getMonth() + 1;
						vm.monthValue8 = month
						vm.monthPrice8 = vm.chartDataYearsPrice.rows[month].money
						vm.show2 = true;
					}
				})
			},

			init: function () {
				get_data('api/user/dataStatistics', {
					token: $api.getStorage('token')
				}, function (ret) {
					if (ret.status || ret.code) {
						//饼状图
						vm.info = ret.data;
						vm.tubiao2Data = ret.data.plasterboard.tubiao2Data;
						vm.rows = ret.data.plasterboard.rows;
						vm.chartData = ret.data.plasterboard.chartData;

						vm.powders_rows = ret.data.powders.rows;
						vm.powders_chartData = ret.data.powders.chartData;
						vm.powders_tubiao2Data = ret.data.powders.tubiao2Data;

						vm.keel_rows = ret.data.keel.rows;
						vm.keel_chartData = ret.data.keel.chartData;
						vm.keel_tubiao2Data = ret.data.keel.tubiao2Data;

						vm.annexe_rows = ret.data.annexe.rows;
						vm.annexe_chartData = ret.data.annexe.chartData;
						vm.annexe_tubiao2Data = ret.data.annexe.tubiao2Data;

						vm.board_rows = ret.data.board.rows;
						vm.board_chartData = ret.data.board.chartData;
						vm.board_tubiao2Data = ret.data.board.tubiao2Data;

						vm.other_board_rows = ret.data.other_board.rows;
						vm.other_board_chartData = ret.data.other_board.chartData;
						vm.other_board_tubiao2Data = ret.data.other_board.tubiao2Data;


						vm.order_board_rows = ret.data.order_board.rows;
						vm.order_board_chartData = ret.data.order_board.chartData;
						vm.order_board_tubiao2Data = ret.data.order_board.tubiao2Data;

						vm.show = true;

						var month = new Date().getMonth() + 1;
						vm.monthValue1 = month;
						vm.monthPrice1 = vm.tubiao2Data[month].month_money
						vm.monthValue2 = month
						vm.monthPrice2 = vm.powders_tubiao2Data[month].month_money
						vm.monthValue3 = month
						vm.monthPrice3 = vm.keel_tubiao2Data[month].month_money
						vm.monthValue4 = month
						vm.monthPrice4 = vm.annexe_tubiao2Data[month].month_money
						vm.monthValue5 = month
						vm.monthPrice5 = vm.board_tubiao2Data[month].month_money
						vm.monthValue6 = month
						vm.monthPrice6 = vm.other_board_tubiao2Data[month].month_money
						vm.monthValue7 = month
						vm.monthPrice7 = vm.order_board_tubiao2Data[month].month_money
					}
				})
			},

			options(chartObj) {
				const tubiao2Data = vm.tubiao2Data;
				// 设置颜色
				const color = vm.tubiao2Data.map(item => {
					return item.color;
				});
				// 等分数量
				let yAxisFormatterInterval = 10;
				// 月份生成
				let xAxisData = function () {
					let i = 1;
					let arr = [];
					do {
						arr.push(i + '月');
						i++
					} while (i <= 12);
					return arr;
				};

				let series = tubiao2Data.map((item, index) => {
					return {
						name: item.name,
						type: "bar",
						stack: "总量",
						label: {
							show: true,
							fontSize: 8
						},
						barWidth: 15,
						color: color[index],
						data: item.data
					}
				})
				chartObj.setOption({
					grid: {
						top: "10px",
						left: "15px",
						right: "15px",
						bottom: "10px",
						containLabel: true
					},
					yAxis: {
						type: 'value',
						max: 100,
						splitNumber: 10, //等分数量
						interval: 10, //刻度间隔
						axisLabel: {
							show: true,
							interval: 'auto',
							formatter: '{value}%',
						},
						show: true
					},
					xAxis: {
						type: "category",
						data: xAxisData()
					},
					series: series
				});
			},

			powdersoptions(chartObj) {
				const tubiao2Data = vm.powders_tubiao2Data;
				// 设置颜色
				const color = vm.tubiao2Data.map(item => {
					return item.color;
				});
				// 等分数量
				let yAxisFormatterInterval = 10;
				// 月份生成
				let xAxisData = function () {
					let i = 1;
					let arr = [];
					do {
						arr.push(i + '月');
						i++
					} while (i <= 12);
					return arr;
				};

				let series = tubiao2Data.map((item, index) => {
					return {
						name: item.name,
						type: "bar",
						stack: "总量",
						label: {
							show: true,
							fontSize: 8
						},
						barWidth: 15,
						color: color[index],
						data: item.data
					}
				})
				chartObj.setOption({
					grid: {
						top: "10px",
						left: "15px",
						right: "15px",
						bottom: "10px",
						containLabel: true
					},
					yAxis: {
						type: 'value',
						max: 100,
						splitNumber: 10, //等分数量
						interval: 10, //刻度间隔
						axisLabel: {
							show: true,
							interval: 'auto',
							formatter: '{value}%',
						},
						show: true
					},
					xAxis: {
						type: "category",
						data: xAxisData()
					},
					series: series
				});
			},
			keeloptions(chartObj) {
				const tubiao2Data = vm.keel_tubiao2Data;
				// 设置颜色
				const color = vm.tubiao2Data.map(item => {
					return item.color;
				});
				// 等分数量
				let yAxisFormatterInterval = 10;
				// 月份生成
				let xAxisData = function () {
					let i = 1;
					let arr = [];
					do {
						arr.push(i + '月');
						i++
					} while (i <= 12);
					return arr;
				};

				let series = tubiao2Data.map((item, index) => {
					return {
						name: item.name,
						type: "bar",
						stack: "总量",
						label: {
							show: true,
							fontSize: 8
						},
						barWidth: 15,
						color: color[index],
						data: item.data
					}
				})
				chartObj.setOption({
					grid: {
						top: "10px",
						left: "15px",
						right: "15px",
						bottom: "10px",
						containLabel: true
					},
					yAxis: {
						type: 'value',
						max: 100,
						splitNumber: 10, //等分数量
						interval: 10, //刻度间隔
						axisLabel: {
							show: true,
							interval: 'auto',
							formatter: '{value}%',
						},
						show: true
					},
					xAxis: {
						type: "category",
						data: xAxisData()
					},
					series: series
				});
			},
			annexeoptions(chartObj) {
				const tubiao2Data = vm.annexe_tubiao2Data;
				// 设置颜色
				const color = vm.tubiao2Data.map(item => {
					return item.color;
				});
				// 等分数量
				let yAxisFormatterInterval = 10;
				// 月份生成
				let xAxisData = function () {
					let i = 1;
					let arr = [];
					do {
						arr.push(i + '月');
						i++
					} while (i <= 12);
					return arr;
				};

				let series = tubiao2Data.map((item, index) => {
					return {
						name: item.name,
						type: "bar",
						stack: "总量",
						label: {
							show: true,
							fontSize: 8
						},
						barWidth: 15,
						color: color[index],
						data: item.data
					}
				})
				chartObj.setOption({
					grid: {
						top: "10px",
						left: "15px",
						right: "15px",
						bottom: "10px",
						containLabel: true
					},
					yAxis: {
						type: 'value',
						max: 100,
						splitNumber: 10, //等分数量
						interval: 10, //刻度间隔
						axisLabel: {
							show: true,
							interval: 'auto',
							formatter: '{value}%',
						},
						show: true
					},
					xAxis: {
						type: "category",
						data: xAxisData()
					},
					series: series
				});
			},
			boardoptions(chartObj) {
				const tubiao2Data = vm.board_tubiao2Data;
				// 设置颜色
				const color = vm.tubiao2Data.map(item => {
					return item.color;
				});
				// 等分数量
				let yAxisFormatterInterval = 10;
				// 月份生成
				let xAxisData = function () {
					let i = 1;
					let arr = [];
					do {
						arr.push(i + '月');
						i++
					} while (i <= 12);
					return arr;
				};

				let series = tubiao2Data.map((item, index) => {
					return {
						name: item.name,
						type: "bar",
						stack: "总量",
						label: {
							show: true,
							fontSize: 8
						},
						barWidth: 15,
						color: color[index],
						data: item.data
					}
				})
				chartObj.setOption({
					grid: {
						top: "10px",
						left: "15px",
						right: "15px",
						bottom: "10px",
						containLabel: true
					},
					yAxis: {
						type: 'value',
						max: 100,
						splitNumber: 10, //等分数量
						interval: 10, //刻度间隔
						axisLabel: {
							show: true,
							interval: 'auto',
							formatter: '{value}%',
						},
						show: true
					},
					xAxis: {
						type: "category",
						data: xAxisData()
					},
					series: series
				});
			},
			otherboardoptions(chartObj) {
				const tubiao2Data = vm.other_board_tubiao2Data;
				// 设置颜色
				const color = vm.tubiao2Data.map(item => {
					return item.color;
				});
				// 等分数量
				let yAxisFormatterInterval = 10;
				// 月份生成
				let xAxisData = function () {
					let i = 1;
					let arr = [];
					do {
						arr.push(i + '月');
						i++
					} while (i <= 12);
					return arr;
				};

				let series = tubiao2Data.map((item, index) => {
					return {
						name: item.name,
						type: "bar",
						stack: "总量",
						label: {
							show: true,
							fontSize: 8
						},
						barWidth: 15,
						color: color[index],
						data: item.data
					}
				})
				chartObj.setOption({
					grid: {
						top: "10px",
						left: "15px",
						right: "15px",
						bottom: "10px",
						containLabel: true
					},
					yAxis: {
						type: 'value',
						max: 100,
						splitNumber: 10, //等分数量
						interval: 10, //刻度间隔
						axisLabel: {
							show: true,
							interval: 'auto',
							formatter: '{value}%',
						},
						show: true
					},
					xAxis: {
						type: "category",
						data: xAxisData()
					},
					series: series
				});
			},
			orderboardoptions(chartObj) {
				const tubiao2Data = vm.order_board_tubiao2Data;
				// 设置颜色
				const color = vm.tubiao2Data.map(item => {
					return item.color;
				});
				// 等分数量
				let yAxisFormatterInterval = 10;
				// 月份生成
				let xAxisData = function () {
					let i = 1;
					let arr = [];
					do {
						arr.push(i + '月');
						i++
					} while (i <= 12);
					return arr;
				};

				let series = tubiao2Data.map((item, index) => {
					return {
						name: item.name,
						type: "bar",
						stack: "总量",
						label: {
							show: true,
							fontSize: 8
						},
						barWidth: 15,
						color: color[index],
						data: item.data
					}
				})
				chartObj.setOption({
					grid: {
						top: "10px",
						left: "15px",
						right: "15px",
						bottom: "10px",
						containLabel: true
					},
					yAxis: {
						type: 'value',
						max: 100,
						splitNumber: 10, //等分数量
						interval: 10, //刻度间隔
						axisLabel: {
							show: true,
							interval: 'auto',
							formatter: '{value}%',
						},
						show: true
					},
					xAxis: {
						type: "category",
						data: xAxisData()
					},
					series: series
				});
			},
		}
	})

	apiready = function () {
		vm.init();
		vm.getMonthStatics();
	};
</script>

</html>